<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>需求推荐 - SocialHub</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #3f72af;
            --primary-light: #f1f5f9;
            --secondary: #112d4e;
            --accent: #dbe2ef;
            --light: #f8f9fa;
            --dark: #212529;
            --gray: #6c757d;
            --light-gray: #e9ecef;
            --danger: #e63946;
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: #f8fafc;
            color: var(--dark);
            line-height: 1.6;
        }
        
        .navbar {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            padding: 0.75rem 1rem;
        }
        
        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .search-container {
            max-width: 600px;
            width: 100%;
        }
        
        .nav-tabs {
            border-bottom: 1px solid var(--light-gray);
            margin-bottom: 1.5rem;
        }
        
        .nav-tabs .nav-link {
            color: var(--gray);
            border: none;
            padding: 0.75rem 1.5rem;
            font-weight: 500;
        }
        
        .nav-tabs .nav-link.active {
            color: var(--primary);
            border-bottom: 3px solid var(--primary);
            background-color: transparent;
        }
        
        .nav-tabs .nav-link:hover {
            color: var(--primary);
            background-color: var(--primary-light);
        }
        
        /* 主内容区样式 */
        .main-container {
            padding: 2rem 0;
        }
        
        .section-title {
            font-size: 1.75rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .view-options {
            display: flex;
            gap: 0.5rem;
        }
        
        .view-btn {
            background: none;
            border: 1px solid var(--light-gray);
            border-radius: 4px;
            padding: 0.25rem 0.75rem;
            color: var(--gray);
            cursor: pointer;
        }
        
        .view-btn.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 需求卡片通用样式 */
        .demand-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            overflow: hidden;
            transition: transform 0.2s, box-shadow 0.2s;
            margin-bottom: 1.5rem;
        }
        
        .demand-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .demand-header {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--light-gray);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .demand-author {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            text-decoration: none;
            color: var(--dark);
        }
        
        .author-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-info {
            line-height: 1.3;
        }
        
        .author-name {
            font-weight: 600;
            font-size: 0.95rem;
        }
        
        .post-time {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        .demand-content {
            padding: 1.25rem;
        }
        
        .demand-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: var(--dark);
            text-decoration: none;
        }
        
        .demand-title:hover {
            color: var(--primary);
        }
        
        .demand-description {
            color: var(--dark);
            margin-bottom: 1rem;
            line-height: 1.6;
        }
        
        .demand-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            color: var(--gray);
            font-size: 0.85rem;
            margin-bottom: 1rem;
        }
        
        .meta-item {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        
        .demand-actions {
            display: flex;
            gap: 1rem;
            padding: 0.75rem 1.25rem;
            border-top: 1px solid var(--light-gray);
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            background: none;
            border: none;
            color: var(--gray);
            font-size: 0.9rem;
            cursor: pointer;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            transition: all 0.2s;
        }
        
        .action-btn:hover {
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        .action-btn.liked {
            color: var(--danger);
        }
        
        .action-btn.saved {
            color: var(--primary);
        }
        
        /* 图片容器样式 */
        .images-container {
            margin-bottom: 1rem;
            border-radius: 6px;
            overflow: hidden;
        }
        
        .single-image {
            width: 100%;
            height: 250px;
            object-fit: cover;
        }
        
        .multiple-images {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 4px;
        }
        
        .multiple-images img {
            width: 100%;
            height: 150px;
            object-fit: cover;
        }
        
        .multiple-images img:nth-child(1) {
            grid-column: 1 / 2;
            grid-row: 1 / 2;
        }
        
        .multiple-images img:nth-child(2) {
            grid-column: 2 / 3;
            grid-row: 1 / 2;
        }
        
        .multiple-images img:nth-child(3) {
            grid-column: 1 / 2;
            grid-row: 2 / 3;
        }
        
        .multiple-images img:nth-child(4) {
            grid-column: 2 / 3;
            grid-row: 2 / 3;
        }
        
        .image-overlay {
            position: relative;
        }
        
        .image-count {
            position: absolute;
            bottom: 4px;
            right: 4px;
            background-color: rgba(0,0,0,0.6);
            color: white;
            font-size: 0.8rem;
            padding: 2px 6px;
            border-radius: 4px;
        }
        
        /* 网格布局特定样式 */
        .grid-layout {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 1.5rem;
        }
        
        .grid-layout .demand-card {
            margin-bottom: 0;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        
        .grid-layout .demand-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .grid-layout .demand-description {
            flex: 1;
        }
        
        /* 列表布局特定样式 */
        .list-layout .demand-card {
            display: flex;
            flex-direction: row;
            max-height: 300px;
        }
        
        .list-layout .image-column {
            flex: 0 0 300px;
        }
        
        .list-layout .info-column {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .list-layout .images-container {
            height: 100%;
            margin-bottom: 0;
        }
        
        .list-layout .single-image,
        .list-layout .multiple-images img {
            height: 100%;
        }
        
        .list-layout .multiple-images {
            height: 100%;
        }
        
        /* 紧凑布局特定样式 */
        .compact-layout .demand-card {
            padding: 1rem;
            display: flex;
            gap: 1rem;
        }
        
        .compact-layout .image-column {
            flex: 0 0 120px;
        }
        
        .compact-layout .info-column {
            flex: 1;
        }
        
        .compact-layout .demand-header {
            padding: 0;
            border-bottom: none;
            margin-bottom: 0.5rem;
        }
        
        .compact-layout .demand-content {
            padding: 0;
        }
        
        .compact-layout .demand-title {
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
        }
        
        .compact-layout .demand-description {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
        }
        
        .compact-layout .demand-actions {
            padding: 0;
            border-top: none;
        }
        
        .compact-layout .single-image {
            height: 120px;
            border-radius: 6px;
        }
        
        /* 标签样式 */
        .tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .tag {
            background-color: var(--primary-light);
            color: var(--primary);
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.8rem;
            text-decoration: none;
        }
        
        .tag:hover {
            background-color: var(--primary);
            color: white;
        }
        
        /* 筛选区样式 */
        .filters-container {
            background-color: white;
            border-radius: 10px;
            padding: 1.25rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            margin-bottom: 1.5rem;
        }
        
        .filter-title {
            font-weight: 600;
            margin-bottom: 1rem;
            font-size: 1.1rem;
        }
        
        .filter-group {
            margin-bottom: 1rem;
        }
        
        .filter-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            font-size: 0.95rem;
        }
        
        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        
        .filter-option {
            background-color: var(--light);
            border: 1px solid var(--light-gray);
            border-radius: 20px;
            padding: 0.25rem 0.75rem;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .filter-option:hover, .filter-option.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .btn-apply {
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 0.5rem 1.5rem;
            font-weight: 600;
            cursor: pointer;
            width: 100%;
            margin-top: 0.5rem;
        }
        
        .btn-apply:hover {
            background-color: var(--secondary);
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .list-layout .image-column {
                flex: 0 0 250px;
            }
            
            .grid-layout {
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            }
        }
        
        @media (max-width: 768px) {
            .list-layout .demand-card {
                flex-direction: column;
                max-height: none;
            }
            
            .list-layout .image-column {
                flex: none;
                height: 200px;
            }
            
            .search-container {
                order: 3;
                margin-top: 1rem;
                width: 100%;
                max-width: none;
            }
            
            .navbar-nav {
                margin-top: 1rem;
            }
        }
        
        @media (max-width: 576px) {
            .grid-layout {
                grid-template-columns: 1fr;
            }
            
            .compact-layout .demand-card {
                flex-direction: column;
            }
            
            .compact-layout .image-column {
                flex: none;
                width: 100%;
            }
            
            .compact-layout .single-image {
                width: 100%;
                height: 180px;
            }
            
            .view-options {
                display: none;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a href="#" class="logo">
                <i class="fas fa-comments"></i>
                SocialHub
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="search-container mx-3">
                <div class="input-group">
                    <span class="input-group-text bg-transparent border-right-0">
                        <i class="fas fa-search text-gray-400"></i>
                    </span>
                    <input type="text" class="form-control border-left-0" placeholder="搜索需求、服务或用户...">
                </div>
            </div>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto align-items-center gap-3">
                    <li class="nav-item">
                        <button class="btn btn-primary">
                            <i class="fas fa-plus me-1"></i> 发布需求
                        </button>
                    </li>
                    <li class="nav-item">
                        <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="rounded-circle" style="width: 38px; height: 38px; object-fit: cover;">
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <div class="container main-container">
        <div class="row">
            <!-- 左侧筛选区 -->
            <div class="col-lg-3 d-none d-lg-block">
                <div class="filters-container sticky-top" style="top: 20px;">
                    <div class="filter-title">筛选条件</div>
                    
                    <div class="filter-group">
                        <div class="filter-label">需求分类</div>
                        <div class="filter-options">
                            <div class="filter-option active">全部</div>
                            <div class="filter-option">生活服务</div>
                            <div class="filter-option">数码科技</div>
                            <div class="filter-option">教育培训</div>
                            <div class="filter-option">运动健康</div>
                            <div class="filter-option">艺术文化</div>
                            <div class="filter-option">其他</div>
                        </div>
                    </div>
                    
                    <div class="filter-group">
                        <div class="filter-label">发布时间</div>
                        <div class="filter-options">
                            <div class="filter-option active">全部时间</div>
                            <div class="filter-option">今天</div>
                            <div class="filter-option">本周</div>
                            <div class="filter-option">本月</div>
                        </div>
                    </div>
                    
                    <div class="filter-group">
                        <div class="filter-label">距离范围</div>
                        <div class="filter-options">
                            <div class="filter-option active">不限</div>
                            <div class="filter-option">1公里内</div>
                            <div class="filter-option">5公里内</div>
                            <div class="filter-option">10公里内</div>
                            <div class="filter-option">30公里内</div>
                        </div>
                    </div>
                    
                    <div class="filter-group">
                        <div class="filter-label">排序方式</div>
                        <div class="filter-options">
                            <div class="filter-option active">最新发布</div>
                            <div class="filter-option">最多浏览</div>
                            <div class="filter-option">最多评论</div>
                            <div class="filter-option">最多点赞</div>
                        </div>
                    </div>
                    
                    <button class="btn-apply">应用筛选</button>
                </div>
            </div>
            
            <!-- 右侧内容区 -->
            <div class="col-lg-9">
                <!-- 导航标签 -->
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">推荐需求</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">附近需求</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">热门需求</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">我的关注</a>
                    </li>
                </ul>
                
                <!-- 网格布局需求 -->
                <div class="section-header">
                    <h2 class="section-title">
                        精选需求
                        <div class="view-options">
                            <button class="view-btn active" data-view="grid"><i class="fas fa-th"></i></button>
                            <button class="view-btn" data-view="list"><i class="fas fa-list"></i></button>
                            <button class="view-btn" data-view="compact"><i class="fas fa-align-left"></i></button>
                        </div>
                    </h2>
                </div>
                
                <!-- 需求内容区 - 网格布局 -->
                <div class="demands-container grid-layout">
                    <!-- 需求1 - 单张图片 -->
                    <div class="demand-card">
                        <div class="demand-header">
                            <a href="#" class="demand-author">
                                <img src="https://picsum.photos/100/100?random=10" alt="用户头像" class="author-avatar">
                                <div class="author-info">
                                    <div class="author-name">摄影爱好者</div>
                                    <div class="post-time">2小时前</div>
                                </div>
                            </a>
                        </div>
                        
                        <div class="demand-content">
                            <a href="#" class="demand-title">寻找专业摄影师拍摄产品宣传照</a>
                            
                            <div class="images-container">
                                <img src="https://picsum.photos/600/400?random=20" alt="产品示例图" class="single-image">
                            </div>
                            
                            <div class="demand-description">
                                我们是一家初创电商公司，需要为新上市的护肤品拍摄一组宣传照。要求摄影师有相关经验，能拍出产品的质感和细节。大概需要拍摄10-15款产品，希望下周能完成拍摄。有兴趣的摄影师请联系我并附上作品集。
                            </div>
                            
                            <div class="tags-container">
                                <a href="#" class="tag">摄影</a>
                                <a href="#" class="tag">产品拍摄</a>
                                <a href="#" class="tag">商业摄影</a>
                            </div>
                            
                            <div class="demand-meta">
                                <div class="meta-item">
                                    <i class="fas fa-eye"></i>
                                    <span>245 浏览</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-comment"></i>
                                    <span>18 评论</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>上海市静安区</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="demand-actions">
                            <button class="action-btn like-btn">
                                <i class="far fa-heart"></i>
                                <span>32</span>
                            </button>
                            <button class="action-btn save-btn">
                                <i class="far fa-bookmark"></i>
                                <span>收藏</span>
                            </button>
                            <button class="action-btn comment-btn">
                                <i class="far fa-comment"></i>
                                <span>评论</span>
                            </button>
                            <button class="action-btn share-btn">
                                <i class="far fa-share-square"></i>
                                <span>分享</span>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 需求2 - 多张图片 -->
                    <div class="demand-card">
                        <div class="demand-header">
                            <a href="#" class="demand-author">
                                <img src="https://picsum.photos/100/100?random=11" alt="用户头像" class="author-avatar">
                                <div class="author-info">
                                    <div class="author-name">居家达人</div>
                                    <div class="post-time">昨天 15:30</div>
                                </div>
                            </a>
                        </div>
                        
                        <div class="demand-content">
                            <a href="#" class="demand-title">求推荐靠谱的室内设计师，附户型图</a>
                            
                            <div class="images-container">
                                <div class="multiple-images">
                                    <img src="https://picsum.photos/600/400?random=21" alt="户型图1">
                                    <img src="https://picsum.photos/600/400?random=22" alt="户型图2">
                                    <img src="https://picsum.photos/600/400?random=23" alt="户型图3">
                                    <div class="image-overlay">
                                        <img src="https://picsum.photos/600/400?random=24" alt="参考风格">
                                        <div class="image-count">+2</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="demand-description">
                                刚买的新房准备装修，面积89平米，两室一厅。希望找一位有经验的室内设计师，偏爱北欧和日式简约风格。预算有限，希望能在控制成本的前提下做出好效果。有类似案例的设计师请联系我，最好能提供初步的设计思路。
                            </div>
                            
                            <div class="tags-container">
                                <a href="#" class="tag">室内设计</a>
                                <a href="#" class="tag">装修</a>
                                <a href="#" class="tag">北欧风格</a>
                            </div>
                            
                            <div class="demand-meta">
                                <div class="meta-item">
                                    <i class="fas fa-eye"></i>
                                    <span>512 浏览</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-comment"></i>
                                    <span>47 评论</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>广州市天河区</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="demand-actions">
                            <button class="action-btn like-btn liked">
                                <i class="fas fa-heart"></i>
                                <span>89</span>
                            </button>
                            <button class="action-btn save-btn">
                                <i class="far fa-bookmark"></i>
                                <span>收藏</span>
                            </button>
                            <button class="action-btn comment-btn">
                                <i class="far fa-comment"></i>
                                <span>评论</span>
                            </button>
                            <button class="action-btn share-btn">
                                <i class="far fa-share-square"></i>
                                <span>分享</span>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 需求3 - 无图片 -->
                    <div class="demand-card">
                        <div class="demand-header">
                            <a href="#" class="demand-author">
                                <img src="https://picsum.photos/100/100?random=12" alt="用户头像" class="author-avatar">
                                <div class="author-info">
                                    <div class="author-name">音乐学习者</div>
                                    <div class="post-time">3天前</div>
                                </div>
                            </a>
                        </div>
                        
                        <div class="demand-content">
                            <a href="#" class="demand-title">寻找钢琴老师，成人零基础入门</a>
                            
                            <div class="demand-description">
                                本人28岁，完全没有音乐基础，但一直很想学钢琴。希望找一位有耐心的钢琴老师，最好有教成人入门的经验。上课地点最好在朝阳区，时间可以周末或工作日晚上。预算每节课200-300元，希望能先试课。有合适的老师请联系我。
                            </div>
                            
                            <div class="tags-container">
                                <a href="#" class="tag">钢琴教学</a>
                                <a href="#" class="tag">音乐培训</a>
                                <a href="#" class="tag">成人教育</a>
                            </div>
                            
                            <div class="demand-meta">
                                <div class="meta-item">
                                    <i class="fas fa-eye"></i>
                                    <span>328 浏览</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-comment"></i>
                                    <span>23 评论</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>北京市朝阳区</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="demand-actions">
                            <button class="action-btn like-btn">
                                <i class="far fa-heart"></i>
                                <span>45</span>
                            </button>
                            <button class="action-btn save-btn saved">
                                <i class="fas fa-bookmark"></i>
                                <span>已收藏</span>
                            </button>
                            <button class="action-btn comment-btn">
                                <i class="far fa-comment"></i>
                                <span>评论</span>
                            </button>
                            <button class="action-btn share-btn">
                                <i class="far fa-share-square"></i>
                                <span>分享</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 列表布局需求 -->
                <div class="section-title mt-5">最新发布</div>
                
                <div class="demands-container list-layout">
                    <!-- 需求4 - 单张图片 -->
                    <div class="demand-card">
                        <div class="image-column">
                            <div class="images-container">
                                <img src="https://picsum.photos/600/400?random=25" alt="宠物看护" class="single-image">
                            </div>
                        </div>
                        
                        <div class="info-column">
                            <div class="demand-header">
                                <a href="#" class="demand-author">
                                    <img src="https://picsum.photos/100/100?random=13" alt="用户头像" class="author-avatar">
                                    <div class="author-info">
                                        <div class="author-name">宠物主人</div>
                                        <div class="post-time">5小时前</div>
                                    </div>
                                </a>
                            </div>
                            
                            <div class="demand-content">
                                <a href="#" class="demand-title">7月出差，寻找可靠的宠物看护照顾我的金毛</a>
                                
                                <div class="demand-description">
                                    本人7月10日至7月25日需要出差，家中有一只2岁的金毛需要照顾。希望找一位有养大型犬经验的朋友帮忙照看，可以住在我家（位于海淀区），也可以每天上门两次喂食、遛狗。狗狗很温顺，已绝育，会定点排便。有兴趣的请联系我，具体细节可以商量，报酬面议。
                                </div>
                                
                                <div class="tags-container">
                                    <a href="#" class="tag">宠物看护</a>
                                    <a href="#" class="tag">金毛</a>
                                    <a href="#" class="tag">海淀区</a>
                                </div>
                                
                                <div class="demand-meta">
                                    <div class="meta-item">
                                        <i class="fas fa-eye"></i>
                                        <span>187 浏览</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="fas fa-comment"></i>
                                        <span>12 评论</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="fas fa-map-marker-alt"></i>
                                        <span>北京市海淀区</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="demand-actions">
                                <button class="action-btn like-btn">
                                    <i class="far fa-heart"></i>
                                    <span>27</span>
                                </button>
                                <button class="action-btn save-btn">
                                    <i class="far fa-bookmark"></i>
                                    <span>收藏</span>
                                </button>
                                <button class="action-btn comment-btn">
                                    <i class="far fa-comment"></i>
                                    <span>评论</span>
                                </button>
                                <button class="action-btn share-btn">
                                    <i class="far fa-share-square"></i>
                                    <span>分享</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 需求5 - 多张图片 -->
                    <div class="demand-card">
                        <div class="image-column">
                            <div class="images-container">
                                <div class="multiple-images">
                                    <img src="https://picsum.photos/600/400?random=26" alt="家具图片1">
                                    <img src="https://picsum.photos/600/400?random=27" alt="家具图片2">
                                    <img src="https://picsum.photos/600/400?random=28" alt="家具图片3">
                                </div>
                            </div>
                        </div>
                        
                        <div class="info-column">
                            <div class="demand-header">
                                <a href="#" class="demand-author">
                                    <img src="https://picsum.photos/100/100?random=14" alt="用户头像" class="author-avatar">
                                    <div class="author-info">
                                        <div class="author-name">搬家甩卖</div>
                                        <div class="post-time">1天前</div>
                                    </div>
                                </a>
                            </div>
                            
                            <div class="demand-content">
                                <a href="#" class="demand-title">搬家甩卖家具家电，求推荐靠谱的二手家具回收或买家</a>
                                
                                <div class="demand-description">
                                    因工作调动需要搬家到另一个城市，现有的家具家电不方便带走，希望能找到靠谱的二手家具回收商或者有需要的个人买家。包括：宜家三人沙发（使用1年）、实木餐桌椅一套（4椅）、海尔双门冰箱、55寸智能电视、洗衣机等。都是近2年内购买的，成色较好。可以打包出也可以单买，有兴趣的请联系我看实物。
                                </div>
                                
                                <div class="tags-container">
                                    <a href="#" class="tag">二手家具</a>
                                    <a href="#" class="tag">搬家甩卖</a>
                                    <a href="#" class="tag">家电</a>
                                </div>
                                
                                <div class="demand-meta">
                                    <div class="meta-item">
                                        <i class="fas fa-eye"></i>
                                        <span>632 浏览</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="fas fa-comment"></i>
                                        <span>58 评论</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="fas fa-map-marker-alt"></i>
                                        <span>深圳市南山区</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="demand-actions">
                                <button class="action-btn like-btn liked">
                                    <i class="fas fa-heart"></i>
                                    <span>76</span>
                                </button>
                                <button class="action-btn save-btn">
                                    <i class="far fa-bookmark"></i>
                                    <span>收藏</span>
                                </button>
                                <button class="action-btn comment-btn">
                                    <i class="far fa-comment"></i>
                                    <span>评论</span>
                                </button>
                                <button class="action-btn share-btn">
                                    <i class="far fa-share-square"></i>
                                    <span>分享</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 紧凑布局需求 -->
                <div class="section-title mt-5">热门需求</div>
                
                <div class="demands-container compact-layout">
                    <!-- 需求6 - 单张图片 -->
                    <div class="demand-card">
                        <div class="image-column">
                            <img src="https://picsum.photos/600/400?random=29" alt="语言交换" class="single-image">
                        </div>
                        
                        <div class="info-column">
                            <div class="demand-header">
                                <a href="#" class="demand-author">
                                    <img src="https://picsum.photos/100/100?random=15" alt="用户头像" class="author-avatar">
                                    <div class="author-info">
                                        <div class="author-name">语言学习者</div>
                                        <div class="post-time">2天前</div>
                                    </div>
                                </a>
                            </div>
                            
                            <div class="demand-content">
                                <a href="#" class="demand-title">寻找英语母语者进行语言交换，我可以教中文</a>
                                
                                <div class="demand-description">
                                    本人英语水平中级，希望找一位英语母语者进行语言交换，每周1-2次，每次1-2小时。我可以教你中文或普通话，你帮我提高英语口语和听力。可以线上视频或者线下见面（上海市区）。
                                </div>
                                
                                <div class="demand-meta">
                                    <div class="meta-item">
                                        <i class="fas fa-eye"></i>
                                        <span>421 浏览</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="fas fa-comment"></i>
                                        <span>33 评论</span>
                                    </div>
                                </div>
                                
                                <div class="demand-actions">
                                    <button class="action-btn like-btn">
                                        <i class="far fa-heart"></i>
                                        <span>64</span>
                                    </button>
                                    <button class="action-btn save-btn">
                                        <i class="far fa-bookmark"></i>
                                        <span>收藏</span>
                                    </button>
                                    <button class="action-btn comment-btn">
                                        <i class="far fa-comment"></i>
                                        <span>评论</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 需求7 - 无图片 -->
                    <div class="demand-card">
                        <div class="image-column">
                            <!-- 无图片 -->
                        </div>
                        
                        <div class="info-column">
                            <div class="demand-header">
                                <a href="#" class="demand-author">
                                    <img src="https://picsum.photos/100/100?random=16" alt="用户头像" class="author-avatar">
                                    <div class="author-info">
                                        <div class="author-name">创业者</div>
                                        <div class="post-time">4天前</div>
                                    </div>
                                </a>
                            </div>
                            
                            <div class="demand-content">
                                <a href="#" class="demand-title">寻找有经验的UI/UX设计师合作创业项目</a>
                                
                                <div class="demand-description">
                                    我们是一个技术创业团队，正在开发一款健康管理类APP，已有初步原型和技术方案。现寻找有经验的UI/UX设计师加入，共同完善产品体验。可以是兼职合作，也可以考虑全职加入。有健康类产品经验者优先，有意请联系并附作品集。
                                </div>
                                
                                <div class="demand-meta">
                                    <div class="meta-item">
                                        <i class="fas fa-eye"></i>
                                        <span>785 浏览</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="fas fa-comment"></i>
                                        <span>42 评论</span>
                                    </div>
                                </div>
                                
                                <div class="demand-actions">
                                    <button class="action-btn like-btn liked">
                                        <i class="fas fa-heart"></i>
                                        <span>97</span>
                                    </button>
                                    <button class="action-btn save-btn saved">
                                        <i class="fas fa-bookmark"></i>
                                        <span>已收藏</span>
                                    </button>
                                    <button class="action-btn comment-btn">
                                        <i class="far fa-comment"></i>
                                        <span>评论</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 需求8 - 多张图片 -->
                    <div class="demand-card">
                        <div class="image-column">
                            <div class="images-container">
                                <div class="multiple-images">
                                    <img src="https://picsum.photos/600/400?random=30" alt=" event photo 1">
                                    <img src="https://picsum.photos/600/400?random=31" alt="event photo 2">
                                    <div class="image-overlay">
                                        <img src="https://picsum.photos/600/400?random=32" alt="event photo 3">
                                        <div class="image-count">+1</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="info-column">
                            <div class="demand-header">
                                <a href="#" class="demand-author">
                                    <img src="https://picsum.photos/100/100?random=17" alt="用户头像" class="author-avatar">
                                    <div class="author-info">
                                        <div class="author-name">活动组织者</div>
                                        <div class="post-time">1周前</div>
                                    </div>
                                </a>
                            </div>
                            
                            <div class="demand-content">
                                <a href="#" class="demand-title">寻找志愿者协助社区环保公益活动</a>
                                
                                <div class="demand-description">
                                    我们将在7月20日组织一次社区环保公益活动，主要内容包括垃圾分类宣传、社区清洁和旧物置换。现需要10-15名志愿者协助活动开展，活动时间上午9点至下午4点，提供午餐和志愿者证书。欢迎有爱心的朋友报名参加！
                                </div>
                                
                                <div class="demand-meta">
                                    <div class="meta-item">
                                        <i class="fas fa-eye"></i>
                                        <span>932 浏览</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="fas fa-comment"></i>
                                        <span>67 评论</span>
                                    </div>
                                </div>
                                
                                <div class="demand-actions">
                                    <button class="action-btn like-btn">
                                        <i class="far fa-heart"></i>
                                        <span>156</span>
                                    </button>
                                    <button class="action-btn save-btn">
                                        <i class="far fa-bookmark"></i>
                                        <span>收藏</span>
                                    </button>
                                    <button class="action-btn comment-btn">
                                        <i class="far fa-comment"></i>
                                        <span>评论</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 加载更多 -->
                <div class="text-center mt-5 mb-3">
                    <button class="btn btn-outline-primary">
                        <i class="fas fa-refresh me-1"></i> 加载更多需求
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 布局切换功能
            const viewButtons = document.querySelectorAll('.view-btn');
            const demandsContainer = document.querySelector('.demands-container.grid-layout');
            
            viewButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 更新按钮状态
                    viewButtons.forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 获取目标布局类型
                    const viewType = this.getAttribute('data-view');
                    
                    // 移除所有布局类
                    demandsContainer.classList.remove('grid-layout', 'list-layout', 'compact-layout');
                    
                    // 添加目标布局类
                    demandsContainer.classList.add(`${viewType}-layout`);
                });
            });
            
            // 筛选选项点击事件
            const filterOptions = document.querySelectorAll('.filter-option');
            
            filterOptions.forEach(option => {
                option.addEventListener('click', function() {
                    // 找到同级的所有选项并移除active类
                    const siblings = this.parentElement.querySelectorAll('.filter-option');
                    siblings.forEach(sib => sib.classList.remove('active'));
                    
                    // 为当前选项添加active类
                    this.classList.add('active');
                });
            });
            
            // 点赞按钮功能
            const likeButtons = document.querySelectorAll('.action-btn.like-btn');
            
            likeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    this.classList.toggle('liked');
                    const icon = this.querySelector('i');
                    const count = this.querySelector('span');
                    let currentCount = parseInt(count.textContent);
                    
                    if (this.classList.contains('liked')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        count.textContent = currentCount + 1;
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        count.textContent = currentCount - 1;
                    }
                });
            });
            
            // 收藏按钮功能
            const saveButtons = document.querySelectorAll('.action-btn.save-btn');
            
            saveButtons.forEach(button => {
                button.addEventListener('click', function() {
                    this.classList.toggle('saved');
                    const icon = this.querySelector('i');
                    const text = this.querySelector('span');
                    
                    if (this.classList.contains('saved')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        text.textContent = '已收藏';
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        text.textContent = '收藏';
                    }
                });
            });
            
            // 评论按钮功能
            const commentButtons = document.querySelectorAll('.action-btn.comment-btn');
            
            commentButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const demandTitle = this.closest('.demand-card').querySelector('.demand-title').textContent;
                    alert(`查看 "${demandTitle}" 的评论区`);
                    // 实际应用中这里会跳转到评论区或打开评论模态框
                });
            });
            
            // 分享按钮功能
            const shareButtons = document.querySelectorAll('.action-btn.share-btn');
            
            shareButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const demandTitle = this.closest('.demand-card').querySelector('.demand-title').textContent;
                    alert(`分享 "${demandTitle}" 到社交媒体`);
                    // 实际应用中这里会打开分享选项
                });
            });
            
            // 加载更多按钮功能
            const loadMoreBtn = document.querySelector('.btn-outline-primary:has(.fa-refresh)');
            
            loadMoreBtn.addEventListener('click', function() {
                this.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> 加载中...';
                
                // 模拟加载延迟
                setTimeout(() => {
                    this.innerHTML = '<i class="fas fa-refresh me-1"></i> 加载更多需求';
                    // 实际应用中这里会加载并添加更多需求内容
                }, 1500);
            });
        });
    </script>
</body>
</html>
    
